<template>
	<view class="wrap">
		 <view class="login-ball bg-linear-gradient small"></view>
		<view class="top" @click="backToMy">
			返回
		</view>
		<view class="content">
			<view class="title" v-show="type">欢迎登录</view>
			<view class="title_zhuce" v-show="!type">欢迎注册</view>
			  <div class="tab-switch">
				<div class="btn-bg" :class="{bg:type === true}" @click="changeBg(3)">立即登录</div>
				<div class="btn-bg" :class="{bg:type === false}" @click="changeBg(4)">立即注册</div> 
			  </div>
			  <view style="height: 120rpx;"></view>
			 
			  <view v-show="type">
				<u-form method="post">
					<u-form-item>
						<u-input v-model="loginForm.username" placeholder="请输入用户名" />
					</u-form-item>
					<u-form-item>
						<u-input type="password" v-model="loginForm.password" placeholder="请输入密码" />
					</u-form-item>		
					<u-form-item>
						<u-input type="password" v-model="loginForm.code" placeholder="请输入验证码" />
						<div class="login-code">
						  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
						</div>					
					</u-form-item>	
				</u-form>				  	
			  </view>
			  
			  <view v-show="!type">
					<u-form method="post">
						<u-form-item>
							<u-input v-model="registerForm.username" placeholder="请输入用户名" />
						</u-form-item>
						<u-form-item>
							<u-input type="password" v-model="registerForm.password" placeholder="请输入密码" />
						</u-form-item>		
						<u-form-item>
							<u-input type="password" v-model="registerForm.confirmPassword" placeholder="请输入确认密码" />
						</u-form-item>	
						<u-form-item>
							<u-input v-model="registerForm.phonenumber" placeholder="请输入电话号码" />		
						</u-form-item>	
						<u-form-item>
							<u-input v-model="registerForm.deptId" placeholder="请输入所属网点id" />				
						</u-form-item>	
						<u-form-item>
							<u-input type="password" v-model="registerForm.code" placeholder="请输入验证码" />
							<div class="login-code">
							  <img :src="codeUrl" @click="getCode" class="login-code-img"/>
							</div>					
						</u-form-item>	
					</u-form>				  	
			  </view>
			
			


			<u-gap height="80" v-show="type"></u-gap>
			<u-gap height="40" v-show="!type"></u-gap>
			<button @click="handleLogin()" class="getSmsCode" v-show="type">登录</button>
			<button @click="handleRegister()" class="getSmsCodeR" v-show="!type">注册</button>
<!-- 			<view class="alternative">
				<view class="password" @click="passwordLogin()">忘记密码</view>
				<view class="issue" @click="loginBy()">遇到问题</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {postmanLogin,getCodeImg,login} from "@/api/login.js"
	import {postmanRegister} from "@/api/register.js"
	import {listNotice,postmanList,getPostman} from "@/api/postman.js"
	import Cookies from "js-cookie";
	import app from "@/App.vue"
	export default {
		data() {
			return {
			  codeUrl: "",
			  type: true,
			  loginForm: {
				username: "",
				password: "123456",
				rememberMe: false,
				code: "4456",
				uuid: "234"
			  },
			  adminForm: {
				username: "admin",
				password: "admin123",
				code: "4456",
				uuid: "234"				  
			  },
			registerForm: {
			  username: "",
			  password: "",
			  confirmPassword: "",
			  phonenumber:"",
			  deptId:1,
			  code: "",
			  uuid: ""
			},
			queryParams: {
			  pageNum: 1,
			  pageSize: 10,
			  userName: undefined,
			  phonenumber: undefined,
			  status: undefined,
			  deptId: undefined
			},
			  loginRules: {
				username: [
				  { required: true, trigger: "blur", message: "请输入您的账号" }
				],
				password: [
				  { required: true, trigger: "blur", message: "请输入您的密码" }
				],
				code: [{ required: true, trigger: "change", message: "请输入验证码" }]
			  },
			  loading: false,
			  // 验证码开关
			  captchaEnabled: true,
			  // 注册开关
			  register: false,
			  redirect: undefined
			}
		},
		onLoad() {
			this.getCode();
			this.getCookie();
		},
		methods: {
			backToMy(){
				uni.switchTab({
					url: '../tabbar/user/my'
				})
			},
			changeBg(index) {
			  if(index=='3') {
			    this.type=true  
			  }
			  if(index=='4') {
			    this.type=false
			  }
			},
			getCode() {
			  getCodeImg().then(res => {
				this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
				if (this.captchaEnabled) {
				  this.codeUrl = "data:image/gif;base64," + res.img;
				  this.loginForm.uuid = res.uuid;
				  this.adminForm.uuid = res.uuid;
				  this.registerForm.uuid = res.uuid;
				}
			  });
			},
			getCookie() {
			  const username = Cookies.get("username");
			  const password = Cookies.get("password");
			  const rememberMe = Cookies.get('rememberMe')
			  this.loginForm = {
				username: username === undefined ? this.loginForm.username : username,
				password: password === undefined ? this.loginForm.password : decrypt(password),
				rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
			  };
			},
			handleLogin() { 
				this.adminForm.code = this.loginForm.code;

				console.log(this.loginForm)
				login(this.adminForm).then(res=>{
					console.log('??')
					console.log(res)
					uni.setStorageSync('token', res.token); 
				})
				postmanLogin(this.loginForm).then(res=>{
					console.log(res)
					if(res.code==200){
						app.globalData.username = this.loginForm.username
						getPostman(app.globalData.username).then(res=>{
							console.log('234')
							console.log(res)							
							app.globalData.phone=res.data.phonenumber
							app.globalData.userId=res.data.userId
							app.globalData.nickName=res.data.nickName
							app.globalData.deptId=res.data.deptId
							console.log(app.globalData.nickName)
							uni.switchTab({
								url: '../tabbar/user/my'
							});								
						
									
						});							
					}else if(res.code==500){
						uni.showToast({
							title:'账号/密码错误',
							icon:'none'
						});	
					}
						
				
					
			// 		if(res.code==200){
			// 			app.globalData.username = this.loginForm.username
			// 			getPostman(app.globalData.username).then(res=>{

			// 				if(res.code==401){
			// 					login(this.adminForm).then(res=>{
			// 						console.log('??')
			// 						console.log(res)
			// 						uni.setStorageSync('token', res.token); 						
			// 					})
			// 					getPostman(app.globalData.username).then(res=>{
									
			// 						console.log('234')
			// 						console.log(res)							
			// 						app.globalData.phone=res.phonenumber
			// 						uni.switchTab({
			// 							url: '../tabbar/user/my'
			// 						});									
			// 					});	
			// 				}else{
			// 					console.log(res)
			// 					app.globalData.phone=res.phonenumber			
			// 					uni.switchTab({
			// 						url: '../tabbar/user/my'
			// 					});
			// 					console.log(app.globalData.username)					
						
			// 						// uni.setStorageSync('token', res.token); 
			// 										// uni.navigateTo({
			// 										// 	url: '/../tabbar/home/index'
			// 										// })									
			// 				}			
			
			// 				}).catch(() => {
			// 							this.loading = false;
			// 							if (this.captchaEnabled) {
			// 							  this.getCode();
			// 							}
			// 				});										
			// 		}
				});
					
			},
			handleRegister(){
				postmanRegister(this.registerForm).then(res=>{
					console.log(res)
					if(res.code==200){
						uni.showToast({
							title:"注册成功,请去登录!",
							icon:'none'
						});	
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						});	
					}
				})
			}
		
		},
	}
</script>

<style>
	.wrap {
		font-size: 28rpx;
	}
	.top {
		margin-top: 50rpx;
		margin-left: 50rpx;
	}
		.content { 
			width: 600rpx;
			margin: 0 auto;
			padding-top: 80rpx;
			}
			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}
			.title_zhuce {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 50rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				font-size: 20rpx;
				margin-bottom: 60rpx;
				margin-top: 30rpx;
			}

			.getSmsCode {
				background-color: rgb(255, 85, 85);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}
		
		.getSmsCodeR {
			background-color: rgb(255, 131, 23);
			color: $u-tips-color;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
		
			&::after {
				border: none;
			}
			.alternative {
					color: $u-tips-color;
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
				}
			}
		.login-code-img{
			height: 70rpx;
			margin-left: 30rpx;
		}
		.bottom {

		}
		.loginType {
			display: flex;
			padding: 260rpx 150rpx 150rpx 150rpx;
			justify-content: space-between;
				
		}
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}	
		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;
				
		}
		.link {
			color: $u-type-warning;
		}
		
		  .tab-switch {
		  
		    height: 100rpx;
		    font-size: 30rpx;
		    background: white;
		    border-bottom: 6rpx solid rgba(209, 206, 206, 0.664);
		    margin-bottom: 5rpx;
		    width: 595rpx;
		    float: left;
		     
		    height: 80rpx;
		  }
		  .btn-bg {
		    float:left;
		    color: rgb(146, 148, 150);
		    background: white;
		    text-align: center;
		    line-height: 71rpx;
		    margin-left: 0rpx;
		    margin-right: 20rpx;
		    margin-top: 10rpx;
		    width: 160rpx;
		    height: 33rpx;
		    margin-bottom: 10rpx;
		  }
		  .bg {
		    color:black;
		        
		  }
		  .bg::after {
		    width: 102%;
		    content: '';
		    display: block;
		    border-bottom: 6rpx solid #f44141;
		    padding: 0px;
		  }

</style>
